<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排行榜</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .ios-shadow {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .rank-item {
            transition: all 0.3s ease;
        }
        .rank-item:hover {
            transform: translateY(-2px);
        }
        .crown {
            background: linear-gradient(45deg, #ffd700, #ffed4e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部状态栏 -->
    <div class="bg-white/10 backdrop-blur-md text-white px-4 py-2 flex justify-between items-center">
        <div class="flex items-center space-x-2" onclick="location.href='index.html'">
            <i class="fas fa-arrow-left"></i>
            <span class="text-sm">返回</span>
        </div>
        <div class="text-sm font-medium">排行榜</div>
        <div class="flex items-center space-x-1">
            <i class="fas fa-refresh text-sm" onclick="refreshRanking()"></i>
        </div>
    </div>

    <!-- 我的排名 -->
    <div class="px-4 py-4">
        <div class="bg-white/95 backdrop-blur-md rounded-xl p-4 ios-shadow mb-4">
            <h3 class="text-lg font-semibold text-gray-800 mb-3 text-center">我的排名</h3>
            <div class="flex items-center justify-between bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-3">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop&crop=face" 
                             alt="头像" class="w-10 h-10 rounded-full object-cover">
                    </div>
                    <div>
                        <div class="font-medium text-gray-800">我的昵称</div>
                        <div class="text-sm text-gray-600">积分: 1,245</div>
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold text-blue-600">#42</div>
                    <div class="text-xs text-gray-500">全球排名</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 排行榜切换 -->
    <div class="px-4 mb-4">
        <div class="bg-white/95 backdrop-blur-md rounded-xl p-1 ios-shadow">
            <div class="grid grid-cols-3 gap-1">
                <button class="tab-btn bg-blue-500 text-white py-2 px-4 rounded-lg font-medium" data-tab="global">
                    全球榜
                </button>
                <button class="tab-btn bg-transparent text-gray-600 py-2 px-4 rounded-lg font-medium" data-tab="friends">
                    好友榜
                </button>
                <button class="tab-btn bg-transparent text-gray-600 py-2 px-4 rounded-lg font-medium" data-tab="weekly">
                    周榜
                </button>
            </div>
        </div>
    </div>

    <!-- 前三名特殊展示 -->
    <div class="px-4 mb-4">
        <div class="bg-white/95 backdrop-blur-md rounded-xl p-4 ios-shadow">
            <div class="flex justify-center items-end space-x-4">
                <!-- 第二名 -->
                <div class="text-center">
                    <div class="w-16 h-16 bg-gradient-to-br from-gray-400 to-gray-600 rounded-full flex items-center justify-center mb-2">
                        <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop&crop=face" 
                             alt="第二名" class="w-14 h-14 rounded-full object-cover">
                    </div>
                    <div class="text-2xl mb-1">🥈</div>
                    <div class="font-medium text-gray-800 text-sm">玩家456</div>
                    <div class="text-xs text-gray-600">2,156分</div>
                </div>
                
                <!-- 第一名 -->
                <div class="text-center transform scale-110">
                    <div class="w-20 h-20 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center mb-2 relative">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face" 
                             alt="第一名" class="w-18 h-18 rounded-full object-cover">
                        <div class="absolute -top-2 -right-2 text-yellow-500">
                            <i class="fas fa-crown text-lg crown"></i>
                        </div>
                    </div>
                    <div class="text-3xl mb-1">🏆</div>
                    <div class="font-bold text-gray-800">棋王123</div>
                    <div class="text-sm text-gray-600">3,428分</div>
                </div>
                
                <!-- 第三名 -->
                <div class="text-center">
                    <div class="w-16 h-16 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mb-2">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face" 
                             alt="第三名" class="w-14 h-14 rounded-full object-cover">
                    </div>
                    <div class="text-2xl mb-1">🥉</div>
                    <div class="font-medium text-gray-800 text-sm">高手789</div>
                    <div class="text-xs text-gray-600">1,987分</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 排行榜列表 -->
    <div class="px-4 pb-20">
        <div class="bg-white/95 backdrop-blur-md rounded-xl ios-shadow">
            <div class="p-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800">排行榜</h3>
            </div>
            
            <div id="rankingList" class="divide-y divide-gray-200">
                <!-- 排名项目 -->
                <div class="rank-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <span class="text-sm font-bold text-gray-600">4</span>
                        </div>
                        <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face" 
                                 alt="玩家" class="w-8 h-8 rounded-full object-cover">
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">智慧女神</div>
                            <div class="text-sm text-gray-600">胜率: 78%</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="font-bold text-gray-800">1,756</div>
                        <div class="text-xs text-gray-500">积分</div>
                    </div>
                </div>

                <div class="rank-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <span class="text-sm font-bold text-gray-600">5</span>
                        </div>
                        <div class="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face" 
                                 alt="玩家" class="w-8 h-8 rounded-full object-cover">
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">策略大师</div>
                            <div class="text-sm text-gray-600">胜率: 75%</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="font-bold text-gray-800">1,654</div>
                        <div class="text-xs text-gray-500">积分</div>
                    </div>
                </div>

                <div class="rank-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <span class="text-sm font-bold text-gray-600">6</span>
                        </div>
                        <div class="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center">
                            <img src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?w=100&h=100&fit=crop&crop=face" 
                                 alt="玩家" class="w-8 h-8 rounded-full object-cover">
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">五子高手</div>
                            <div class="text-sm text-gray-600">胜率: 72%</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="font-bold text-gray-800">1,543</div>
                        <div class="text-xs text-gray-500">积分</div>
                    </div>
                </div>

                <div class="rank-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <span class="text-sm font-bold text-gray-600">7</span>
                        </div>
                        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                            <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?w=100&h=100&fit=crop&crop=face" 
                                 alt="玩家" class="w-8 h-8 rounded-full object-cover">
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">棋艺精湛</div>
                            <div class="text-sm text-gray-600">胜率: 69%</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="font-bold text-gray-800">1,432</div>
                        <div class="text-xs text-gray-500">积分</div>
                    </div>
                </div>

                <div class="rank-item p-4 flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <span class="text-sm font-bold text-gray-600">8</span>
                        </div>
                        <div class="w-10 h-10 bg-gradient-to-br from-pink-500 to-pink-600 rounded-full flex items-center justify-center">
                            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop&crop=face" 
                                 alt="玩家" class="w-8 h-8 rounded-full object-cover">
                        </div>
                        <div>
                            <div class="font-medium text-gray-800">思维敏捷</div>
                            <div class="text-sm text-gray-600">胜率: 67%</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="font-bold text-gray-800">1,321</div>
                        <div class="text-xs text-gray-500">积分</div>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多 -->
            <div class="p-4 text-center">
                <button class="text-blue-600 font-medium" onclick="loadMoreRanking()">
                    <i class="fas fa-chevron-down mr-2"></i>查看更多排名
                </button>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-gray-200/50">
        <div class="flex justify-around py-3">
            <div class="flex flex-col items-center text-gray-400" onclick="location.href='index.html'">
                <i class="fas fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </div>
            <div class="flex flex-col items-center text-gray-400" onclick="location.href='game.html'">
                <i class="fas fa-gamepad text-xl mb-1"></i>
                <span class="text-xs">游戏</span>
            </div>
            <div class="flex flex-col items-center text-gray-400" onclick="location.href='profile.html'">
                <i class="fas fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </div>
        </div>
    </div>

    <script>
        // 切换排行榜类型
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除所有按钮的选中状态
                document.querySelectorAll('.tab-btn').forEach(b => {
                    b.classList.remove('bg-blue-500', 'text-white');
                    b.classList.add('bg-transparent', 'text-gray-600');
                });
                
                // 添加当前按钮的选中状态
                this.classList.remove('bg-transparent', 'text-gray-600');
                this.classList.add('bg-blue-500', 'text-white');
                
                // 根据选择的类型加载不同的排行榜数据
                const tabType = this.dataset.tab;
                loadRankingData(tabType);
            });
        });

        // 加载排行榜数据
        function loadRankingData(type) {
            // 这里可以根据类型加载不同的数据
            console.log('加载排行榜数据:', type);
        }

        // 刷新排行榜
        function refreshRanking() {
            // 添加刷新动画
            const refreshIcon = document.querySelector('.fa-refresh');
            refreshIcon.classList.add('animate-spin');
            
            setTimeout(() => {
                refreshIcon.classList.remove('animate-spin');
                alert('排行榜已刷新');
            }, 1000);
        }

        // 加载更多排名
        function loadMoreRanking() {
            alert('加载更多排名功能');
        }
    </script>
</body>
</html>